<template>
    <div>
        <h2 class="title" @mouseenter="$emit('hover-title')" @mouseleave="$emit('leave-title')">全部商品分类</h2>
        <Transition name="category">
            <!-- 三级分类容器 -->
            <div class="category-container" @mouseleave="cursorCategory = {}" v-show="showCategory">
                <!-- 一级分类 -->
                <div class="category-one">
                    <div class="item" v-for="(category, index) in  categoryList " :key="category.categoryId"
                        @mouseenter="cursorCategory = category"
                        :class="{ hover: cursorCategory.categoryId === category.categoryId }">
                        <h3 @click="$emit('select-category', category, 1)">
                            <!-- 使用声明式路由，会在瞬间创建大量 RouterLink 组件不推荐-->
                            <!-- <RouterLink :to="{ name: 'search' }">{{ category.categoryName }}</RouterLink> -->
                            <!-- 为每一个a标签添加点击事件，不推荐 -->
                            <a>{{ category.categoryName }}</a>
                        </h3>
                    </div>
                </div>

                <!-- 二级分类 -->
                <div class="category-two clearfix" v-show="cursorCategory.categoryChild?.length">
                    <div class="item" v-for="( category, index ) in  cursorCategory.categoryChild "
                        :key="category.categoryId">
                        <dl class="fore">
                            <dt>
                                <a @click="$emit('select-category', category, 2)">{{ category.categoryName }}</a>
                            </dt>
                            <dd>
                                <!-- 三级分类 -->
                                <em v-for="( item, index ) in  category.categoryChild " :key="item.categoryId"
                                    @click="$emit('select-category', item, 3)">
                                    <a>{{ item.categoryName }}</a>
                                </em>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </Transition>

    </div>
</template>

<script setup lang="ts" name="Category">
import { onMounted, ref } from 'vue';
import { useProductStore } from '@/stores/product';
import { storeToRefs } from 'pinia';
const productStore = useProductStore();
const { categoryList }: { categoryList: Array<any> } = storeToRefs(productStore) as any;
let cursorCategory = ref<any>({});
defineProps({
    showCategory: {
        type: Boolean,
        default: true
    }
});
onMounted(() => {
    productStore.loadCategoryList();
})
</script>

<style scoped lang="less">
.title {
    width: 210px;
    height: 45px;
    background-color: #e1251b;
    line-height: 45px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

.category-container {
    left: 0;
    top: 45px;
    width: 210px;
    height: 416px;
    position: absolute;
    background: #fafafa;
    z-index: 999;

    //一级分类样式
    .category-one {
        height: 100%;
        overflow-y: auto;

        // 隐藏滚动条
        &::-webkit-scrollbar {
            display: none;
        }

        .item {
            h3 {
                line-height: 30px;
                font-size: 14px;
                font-weight: 400;
                overflow: hidden;
                padding: 0 20px;
                margin: 0;

                a {
                    color: #333;
                }
            }


            &.hover {
                background-color: skyblue;
                cursor: pointer;
            }
        }

    }

    .category-two {
        position: absolute;
        width: 734px;
        min-height: 460px;
        background: #f7f7f7;
        left: 210px;
        border: 1px solid #ddd;
        top: 0;
        z-index: 9999 !important;

        .item {
            float: left;
            width: 650px;
            padding: 0 4px 0 8px;

            dl {
                border-top: 1px solid #eee;
                padding: 6px 0;
                overflow: hidden;
                zoom: 1;

                &.fore {
                    border-top: 0;
                }

                dt {
                    float: left;
                    width: 54px;
                    line-height: 22px;
                    text-align: right;
                    padding: 3px 6px 0 0;
                    font-weight: 700;
                }

                dd {
                    float: left;
                    width: 415px;
                    padding: 3px 0 0;
                    overflow: hidden;

                    em {
                        float: left;
                        height: 14px;
                        line-height: 14px;
                        padding: 0 8px;
                        margin-top: 5px;
                        border-left: 1px solid #ccc;
                    }
                }
            }
        }
    }

    a {
        &:hover {
            text-decoration: underline;
            cursor: pointer;
        }
    }
}

// 过渡动画
.category-enter-active,
.category-leave-active {
    transition: all 0.3s linear;
}

.category-enter-from,
.category-leave-to {
    height: 0;
    opacity: 0;
}
</style>